<template>
    <div class="base-home">
        <Amap :showSearch="false" class="container-map" @complete="complete"></Amap>
        <cover ></cover>
        <div class="left">
            <overview></overview>
            <div style="height: 1vh;"></div>
            <zzfb></zzfb>
        </div>
        <div class="right">
            <lishi></lishi>
            <div style="height: 1vh;"></div>
            <xiaoshou></xiaoshou>
            <div style="height: 1vh;"></div>
            <houpin></houpin>

        </div>
    </div>
</template>
<script setup lang="ts">
import Amap from '@/components/Amap.vue';
import ZheRongmap from '@/components/ZheRongmap.vue';
import cover from '@/components/cover.vue';
import overview from './overview.vue';
import zzfb from './zzfb.vue';
import lishi from './lishi.vue'
import houpin from './huopin.vue'
import xiaoshou from './xiaoshou.vue'

const complete = (map: AMap.Map) => {
    map.on('click', (e: AMap.Event) => {
        console.log(e.lnglat)
        
    })
     let newmarker = new AMap.Marker({
            position: [121.696364, 31.068521],
            anchor: 'bottom-center',
            map: map
        });
       
        let text = new AMap.Text({
            text: '清美空港科技农业基地',
            anchor: 'center', // 设置文本标记锚点
            angle: 0,
            offset: new AMap.Pixel(0, -50),
            style: {
                'text-align': 'center', background: '#03a90dee', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
            },
            position: [121.696364, 31.068521],
            map
        });
}
</script>
<style scoped>
.base-home {
    display: flex;
    justify-content: space-between;
    padding: 7.8vh 2vw 0 2vw;
    background: url(../../assets/img/2.jpg);

    background-size: cover;
    height: 100vh;
    box-sizing: border-box;
}

.left {
    width: 23.6vw;
    position: relative;
    z-index: 1;
}

.right {
    width: 23.6vw;
    position: relative;
    z-index: 1;
}
.container-map {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}
</style>